<template>
  <div>
    <div class="ls_maincont"></div>
    <!-- <canvas id="canvas" width="800" height="600" ></canvas> -->
    <div class="mainDiv fpl_c">
      <div class="r">
        <div class="stage_c_r main_3 fpl_item">
          <div class="t">
            <div class="react">
              <i class="l_up"></i>
              <i class="l_down"></i>
              <i class="r_up"></i>
              <i class="r_down"></i>
              <div class="title">
                <span>A层着火燃烧稳定性(%)</span>
              </div>
            </div>
          </div>
          <div class="d d2 zhu">
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>75</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">A1</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>75</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">A2</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>75</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">A3</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>75</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">A4</div>
            </div>
          </div>
        </div>
        <div class="stage_c_r main_3 fpl_item">
          <div class="t">
            <div class="react">
              <i class="l_up"></i>
              <i class="l_down"></i>
              <i class="r_up"></i>
              <i class="r_down"></i>
              <div class="title">
                <span>B层着火燃烧稳定性(%)</span>
              </div>
            </div>
          </div>
          <div class="d d2 zhu">
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>75</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">B1</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>75</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">B2</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>75</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">B3</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>75</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">B4</div>
            </div>
          </div>
        </div>
      </div>
      <div class="r">
        <div class="stage_c_r main_3 fpl_item">
          <div class="t">
            <div class="react">
              <i class="l_up"></i>
              <i class="l_down"></i>
              <i class="r_up"></i>
              <i class="r_down"></i>
              <div class="title">
                <span>C层着火燃烧稳定性(%)</span>
              </div>
            </div>
          </div>
          <div class="d d2 zhu">
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">C1</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">C2</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">C3</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">C4</div>
            </div>
          </div>
        </div>
        <div class="stage_c_r main_3 fpl_item">
          <div class="t">
            <div class="react">
              <i class="l_up"></i>
              <i class="l_down"></i>
              <i class="r_up"></i>
              <i class="r_down"></i>
              <div class="title">
                <span>D层着火燃烧稳定性(%)</span>
              </div>
            </div>
          </div>
          <div class="d d2 zhu">
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">D1</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">D2</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">D3</div>
            </div>
            <div class="zhu_c">
              <div class="zhu_top">
                <div class="wendutiao_react nomal"></div>
                <div class="wendutiao_text">
                  <span>100</span>
                  <span>50</span>
                  <span>25</span>
                  <span>0</span>
                </div>
              </div>
              <div class="zhu_down">D4</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stage_t">
      <a href="#"></a>
      <h1  >1号锅炉燃烧数字化与低负荷稳燃监测管理系统</h1>
      <div>
        <span></span>
        <span id="todayTimer">{{ nowTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { formatTime } from "../utils/date.js";
import { postranshaowendingxingapi } from "../api/ranshaowendingxing";
const nowTime = ref("");
onMounted(() => {
  setInterval(() => {
    nowTime.value = formatTime(new Date());
  });
  tuxing()
});

let tuxing = async () => {
  const res = await postranshaowendingxingapi()
  const tuxingData = res.data

  // 转化为key为location字段的map，便于准确识别和使用
  const dataMap = {}
  tuxingData.forEach(item => {
    dataMap[item.location] = item
  })

  const elArr = document.getElementsByClassName("wendutiao_react")
  for (let index = 0; index < elArr.length; index++) {
    const el = elArr[index];
    // 找到location，并依据location识别并赋值
    const location = el.parentElement.parentElement.getElementsByClassName("zhu_down")[0].innerText
    // 燃烧稳定性
    let stability = dataMap[location].stability
    stability = Math.min(100, Math.ceil(stability))
    el.style.height = `${stability}%`


    // 依据warnning字段的第三个值，修改颜色
    let colorNum = Number(dataMap[location].warning.split(',')[2])
    if (colorNum === 0) {
      el.style.backgroundColor = 'green'
    } else if (colorNum === 1) {
      el.style.backgroundColor = 'yellow'
    } else {
      el.style.backgroundColor = 'red'
    }
  }
}

</script>

<style lang="scss" scoped></style>
